<template>
    <view class="rate">
        <view class="rate_header">
            <image :src="shoplogo" mode=""></image>
            <p>{{ shopname }}</p>
        </view>
        <view class="rate_wrap">
            <view class="rate_title"> How do you feel? </view>
            <view class="rate_icon">
                <u-rate
                    :count="count"
                    activeColor="#FA751F"
                    inactiveColor="#EFE0D7"
                    :allowHalf="true"
                    :size="30"
                    v-model="score"
                ></u-rate>
            </view>
            <view class="rate_title" style="margin-top: 20rpx">
                Add photos
            </view>
            <u-upload
                :fileList="fileList"
                uploadIconColor="#ffffff"
                @afterRead="afterRead"
                @delete="deletePic"
                multiple
                :maxCount="9"
            ></u-upload>
            <view class="rate_title" style="margin-top: 20rpx"> Comment </view>
            <view class="rate_textarea">
                <textarea
                    placeholder="please enter"
                    v-model="content"
                    placeholder-style="color:#9E6B47"
                />
            </view>
            <view class="rate_btn" @click.stop="handleSubmit"> 提交 </view>
        </view>
    </view>
</template>

<script>
import { policy } from "@/lib/service";
import { getReview } from "@/lib/business.js";
export default {
    data() {
        return {
            count: 5,
            score: 0,
            fileList: [],
            orderid: "",
            shopname: "",
            shoplogo: "",
            content: "",
        };
    },
    onLoad(options) {
        this.orderid = options.orderid;
        this.shopname = options.shopname;
        this.shoplogo = options.shoplogo;
    },
    methods: {
        // 新增图片
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let lists = [].concat(event.file);
            let fileListLen = this.fileList.length;
            lists.map((item) => {
                this.fileList.push({
                    ...item,
                    status: "uploading",
                    message: "上传中",
                });
            });
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i]);
                let item = this.fileList[fileListLen];
                this.fileList.splice(
                    fileListLen,
                    1,
                    Object.assign(item, {
                        status: "success",
                        message: "",
                        url: result,
                    })
                );
                fileListLen++;
            }
        },
        deletePic(event) {
            this.fileList.splice(event.index, 1);
        },
        uploadFilePromise(file) {
            let name = file.name ? file.name : file.url.split("/").pop();
            return new Promise((resolve, reject) => {
                policy("house", name).then((res) => {
                    let a = uni.uploadFile({
                        url: res.data.signedUrl, // 仅为示例，非真实的接口地址
                        filePath: file.url,
                        name: "file",
                        success: (res) => {
                            try {
                                var data = JSON.parse(res.data);
                                resolve(data.data);
                            } catch (e) {
                                console.log(e);
                            }
                        },
                    });
                });
            });
        },
        handleSubmit() {
            if (this.score <= 0) {
                uni.showToast({
                    title: "Please rate the shop",
                    icon: "none",
                });
                return;
            }
            if (!this.content) {
                uni.showToast({
                    title: "Please fill in the evaluation",
                    icon: "none",
                });
                return;
            }
            let params = {
                orderid: this.orderid,
                score: this.score,
                content: this.content,
                imgurl: this.fileList.map((item) => item.url).join(","),
            };
            getReview(params).then((res) => {
                if (res.statusCode == 0) {
                    uni.showToast({
                        title: "Evaluation successful",
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1,
                        });
                    }, 1500);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.rate_header {
    text-align: center;
    padding-top: 24rpx;
    background: #fcfaf7;
    padding-bottom: 45rpx;

    image {
        width: 210rpx;
        height: 210rpx;
        border-radius: 12rpx;
        background-color: #eeeeee;
    }

    p {
        font-family: Manrope, Manrope;
        font-weight: 500;
        font-size: 32rpx;
        color: #1c120d;
        padding-top: 20rpx;
    }
}

.rate_wrap {
    padding: 40rpx 46rpx;

    .rate_title {
        font-family: Manrope, Manrope;
        font-weight: 600;
        font-size: 28rpx;
        color: #666666;
        padding-bottom: 24rpx;
    }

    .rate_icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.rate_textarea {
    height: 260rpx;
    background: #f7f7f7;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 48rpx;
}

.rate_btn {
    width: 660rpx;
    height: 96rpx;
    background: #fa751f;
    border-radius: 50rpx;
    font-weight: bold;
    font-size: 32rpx;
    color: #fcfaf7;
    line-height: 96rpx;
    text-align: center;
}
</style>
